<template>
  <a-card title="提案信息配置" style="overflow-y: scroll; height: 100%;">
    <a-form
      :model="formState"
      name="basic"
      :label-col="{ style: { width: '165px' } }"
      autocomplete="off"
      @finish="onFinish"
      @finishFailed="onFinishFailed"
    >
      <a-form-item
        label="配置名称"
        name="configName"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.username" placeholder="配置名称" />
      </a-form-item>
      <a-form-item
        label="附议人数量"
        name="seconderNumber"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.username" placeholder="附议人数量" />
      </a-form-item>
      <a-form-item label="提交模式" name="commitMode">
        <a-radio-group v-model:value="formState.username" button-style="solid">
          <a-radio-button value="手动提交">手动提交</a-radio-button>
          <a-radio-button value="自动提交">自动提交</a-radio-button>
          <a-radio-button value="手自一体">手自一体</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item
        label="超时自动提交天数"
        name="AutoSubmitDay"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input
          v-model:value="formState.username"
          placeholder="协办单位超时自动提交天数"
        />
      </a-form-item>
      <a-form-item
        label="提醒日期"
        name="reminderDate"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-date-picker v-model:value="formState.username" picker="week" />
      </a-form-item>
      <a-form-item
        label="办理提醒设置(多选)"
        name="handleSettings"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-checkbox-group v-model:value="formState.handleSettings">
          <a-checkbox
            value="短信提醒"
            :style="{
              color:
                formState.handleSettings.includes('短信提醒') === true
                  ? '#fff'
                  : '',
            }"
            >短信提醒</a-checkbox
          >
          <a-checkbox
            value="企业微信"
            :style="{
              color:
                formState.handleSettings.includes('企业微信') === true
                  ? '#fff'
                  : '',
            }"
            >企业微信</a-checkbox
          >
        </a-checkbox-group>
      </a-form-item>
      <a-form-item
        label="撰写提案方式(多选)"
        name="writeProposal"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-checkbox-group v-model:value="formState.writeProposal">
          <a-checkbox
            value="个人提案"
            :style="{
              color:
                formState.writeProposal.includes('个人提案') === true
                  ? '#fff'
                  : '',
            }"
            >个人提案</a-checkbox
          >
          <a-checkbox
            value="代表团提案"
            :style="{
              color:
                formState.writeProposal.includes('代表团提案') === true
                  ? '#fff'
                  : '',
            }"
            >代表团提案</a-checkbox
          >
          <a-checkbox
            value="委员会提案"
            :style="{
              color:
                formState.writeProposal.includes('委员会提案') === true
                  ? '#fff'
                  : '',
            }"
            >委员会提案</a-checkbox
          >
          <a-checkbox
            value="单位提案"
            :style="{
              color:
                formState.writeProposal.includes('单位提案') === true
                  ? '#fff'
                  : '',
            }"
            >单位提案</a-checkbox
          >
        </a-checkbox-group>
      </a-form-item>
      <a-form-item
        label="提案最少字数"
        name="proposalMinSize"
        :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input-number
          id="inputNumber"
          v-model:value="formState.proposalMinSize"
          :min="20"
          :max="1000"
        />
      </a-form-item>
      <a-form-item label="校领导单位代码" name="schoolLeadershipCode">
        <a-input
          v-model:value="formState.schoolLeadershipCode"
          placeholder="校领导单位代码"
        />
      </a-form-item>
      <a-form-item label="不予立案理由" name="groundsForDismissal">
        <div
          class="argument"
          v-for="(item, index) in formState.groundsForDismissal"
          :key="item.id"
        >
          <a-input v-model:value="item.title" :addon-before="index + 1" />
          <a-button type="primary" danger>
            <template #icon> <DeleteOutlined /> </template
          ></a-button>
        </div>
        <a-button
          type="primary"
          @click="
            formState.groundsForDismissal.push({
              id: formState.groundsForDismissal.length + 1,
              title: '不符合党和国家方针、政策、法律、法规的问题。',
            })
          "
          >增加一条</a-button
        >
      </a-form-item>
      <a-form-item label="二次答复需要校领导审批" name="needSchoolLeaders">
        <a-radio-group v-model:value="formState.username" button-style="solid">
          <a-radio-button value="是">是</a-radio-button>
          <a-radio-button value="否">否</a-radio-button>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="主办配置" name="hostConfig" labelAlign="">
        <a-row>
          <a-col :span="12">
            <span style="color: #ccc; margin-right: 10px">需要答复</span> 需要
            <a-switch :checked="true" /> 不需要
          </a-col>
          <a-col :span="12">
            <span style="color: #ccc; margin-right: 10px">答复顺序</span>
            第二答复 <a-switch :checked="false" /> 首先答复</a-col
          >
        </a-row>
      </a-form-item>
      <a-form-item label="协办配置" name="assistConfig">
        <a-row>
          <a-col :span="12">
            <span style="color: #ccc; margin-right: 10px">需要答复</span> 需要
            <a-switch :checked="true" /> 不需要
          </a-col>
          <a-col :span="12">
            <span style="color: #ccc; margin-right: 10px">答复顺序</span>
            第二答复 <a-switch /> 首先答复</a-col
          >
        </a-row>
      </a-form-item>
      <a-form-item label="撰写须知" name="writeNoticeThat">
        <MyEditor :height="300" />
      </a-form-item>
      <a-row justify="flex-end">
        <a-col :span="20"></a-col>
        <a-col :span="4" style="float:right;">
          <a-button style="margin-right: 20px;padding: 0 30px;">重置</a-button>
          <a-button type="primary" style="padding: 0 30px;">提交</a-button>
        </a-col>
      </a-row>
    </a-form>
  </a-card>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { DeleteOutlined } from "@ant-design/icons-vue";
import MyEditor from "@/view/common/wangEditor.vue";
const formState = reactive({
  username: "",
  password: "",
  remember: true,
  handleSettings: [] as string[],
  writeProposal: [] as string[],
  proposalMinSize: 999,
  schoolLeadershipCode: 666,
  groundsForDismissal: [
    {
      id: 1,
      title: "不符合党和国家方针、政策、法律、法规的问题。",
    },
    {
      id: 2,
      title: "不符合党和国家方针、政策、法律、法规的问题。",
    },
    {
      id: 3,
      title: "不符合党和国家方针、政策、法律、法规的问题。",
    },
  ],
});
const onFinish = (values: any) => {
  console.log("Success:", values);
};

const onFinishFailed = (errorInfo: any) => {
  console.log("Failed:", errorInfo);
};
</script>

<style scoped lang="less">
:deep(.ant-radio-button-wrapper) {
  margin-right: 10px;
  border-left-width: 1px;
  &::before {
    width: 0px;
  }
}
:deep(.ant-checkbox-wrapper) {
  position: relative;
}
:deep(.ant-checkbox-inner) {
  padding: 15px;
  width: 90px;
}
:deep(.ant-checkbox + span) {
  text-align: center;
  line-height: 260%;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  bottom: 0;
  transform: translateX(-50%);
}
:deep(.ant-checkbox-inner::after) {
  display: none;
}
.argument {
  width: 70%;
  display: flex;
  margin-bottom: 10px;
  button {
    margin-left: 20px;
  }
}
</style>
